<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue事件绑定</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
        v-on指令  实现事件的绑定
        1. v-on:click="fn1"   vue实例在解析模板时 会将该指令解析    给按钮绑定事件
        2. @click

        new  Vue   创建vue实例时  vm会将对象参数中的data属性值进行 数据代理  get  set

        this.info   ->     getInfo()   -> data info
        this.info="hello"   ->  setInfo()   ->   data info
-->
<!--  初始化容器  -->
<div id="app">
    <h1>{{info}}</h1>
    <h1>age = {{age}}</h1>
    <!--    事件的声明-->
    <button v-on:click="fn1">点击1</button>
    <!--    <button v-on:mouseenter="fn1">点击</button>-->

    <!--    事件绑定简化写法-->
    <button @dblclick="fn1">双击2</button>

    <!--    改变age的值-->
    <button @click="addAge">age+1</button>
    <button @click="addAgeByStep(5)">age+5</button>
</div>

<script type="text/javascript">

    const vm = new Vue({
        el: '#app',
        data: {
            info: 'vue 事件绑定',
            age: 15
        },
        methods: {   //  定义函数
            fn1() {
                console.log("hello vue")
            },
            addAge() {
                // 如何获取  data中设置的age  this.age
                // console.log(vm==this)   true
                 console.log(this)
                this.age++   //  this.age = this.age+1
            },
            addAgeByStep(step) {
                this.age = this.age + 5
            }
        }
    })


</script>


</body>
</html>
